<template>
  <el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" top="5vh" width="80%"
             :visible.sync="dialog" style="padding: 10px 20px;"
             title="人员选择" append-to-body>
    <el-tabs v-model="activeName" @tab-click="tabClick">
      <el-tab-pane label="按部门" name="dept">
        <dept-select ref="dept"/>
      </el-tab-pane>
      <el-tab-pane label="按岗位" name="post">
        <post-select ref="post"/>
      </el-tab-pane>
      <!-- <el-tab-pane label="按专业" name="major">
        <major-select ref="major"/>
      </el-tab-pane> -->
      <el-tab-pane label="按人员" name="deptUser">
        <dept-user-select ref="deptUser"/>
      </el-tab-pane>
    </el-tabs>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import deptSelect from './deptSelect'
  import postSelect from './postSelect'
  import majorSelect from './majorSelect'
  import deptUserSelect from './deptUserSelect'

  export default {
    name: 'commonSelect',
    components: { deptSelect, postSelect, majorSelect, deptUserSelect },
    data() {
      return {
        dialog: false,
        activeName: 'dept'
      }
    },
    methods: {
      cancel() {
        this.dialog = false
      },
      tabClick(name) {
        this.$refs[this.activeName].selectedData = []
      },
      submit() {
        this.$emit('setSelectInfo', this.$refs[this.activeName].getResult())
        this.cancel()
      }
    }
  }
</script>
<style>


</style>
